<template>
  <el-container class="m-mainLayout">
    <el-header class="mainHeader">
      <The-Header></The-Header>
    </el-header>
    <el-container class="mainContiner">
      <The-Nav :routes="permission_routers"></The-Nav>
      <el-container>
        <el-main class="mainRight">
          <The-Crumbs></The-Crumbs>
          <div class="pageView scrollBar" :style="{
          'min-width':slideOpen ? '1302px':'1166px'
        }">
            <keep-alive>
              <router-view v-if="$route.meta.keepAlive" :key="$route.name"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive" :key="$route.query.t"></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
  import {mapGetters} from 'vuex'
  import TheHeader from './components/TheHeader.vue'
  import TheNav from './components/TheNav.vue'
  import TheCrumbs from './components/TheCrumbs.vue'
  export default {
    name: 'Main',
    data () {
      return {}
    },
    components: {
      TheHeader,
      TheNav,
      TheCrumbs,
    },
    computed: {
      ...mapGetters([
        'permission_routers',
      ]),
      slideOpen(){
        return this.$store.state.app.slideOpen
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../scss/variables";

  .m-mainLayout {
    height: 100%;
    .mainHeader {
      background-color: $bg_A;
    }
    .mainContiner {
      overflow: auto;
      .mainRight {
        display: flex;
        flex-direction: column;
        border-left: solid 1px $--border-color-base;
        padding: 0;
      }
    }
  }
</style>
